<script setup>
import GeneralConditionChart from '@/views/scheme_design/components/GeneralConditionChart.vue'
import { ref, onMounted, watch } from 'vue'
// 导入element-plus组件的Plus图标
import { Plus, Delete, View } from '@element-plus/icons-vue'
// 子组件传递数据给父组件
const emit = defineEmits([
  'updateSystemicDiseaseFromFather',
  'updateDiseaseHistoryFromFather',
  'updateCurrentRecordFromFather',
  'updateImageCheck',
  'updateMouthImage',
  'updatePlanFormFromFather'
])

const planForm = ref('')

// 绑定全身状况图
const generalConditionChartRef = ref('')

// 全身状况集合
const systemicDisease = ref(null)

// 全身状况对应中文名称
const systemicDiseaseName = {
  highBloodPressure: '高血压',
  diabetes: '糖尿病',
  coronaryHeartDisease: '冠心病',
  cerebrovascularDisease: '脑血管疾病',
  atherosclerosis: '动脉粥样硬化',
  lungDisease: '肺部疾病',
  gastrointestinalDisease: '胃肠道病',
  rheumatoidArthritis: '类风湿性关节炎',
  osteoporosis: '骨质疏松',
  hemopathy: '血液病',
  hepatobiliaryDisease: '肝胆病',
  otherDisease: '其他疾病',
  cardiacCerebrovascularSurgery: '心脑血管手术',
  jointValveReplacementSurgery: '关节、瓣膜置换手术',
  organTransplantSurgery: '器官移植手术',
  otherSurgery: '其他手术',
  gestationPeriod: '妊娠期',
  immediateFamilyPeriodontitisHistory: '直系亲属牙周炎病史',
  smoking: '吸烟',
  anxietyNervousnessStress: '焦虑、神经紧张、压力',
  otherDiseaseAndLongTreatment: '其他疾病、长期药物治疗史'
}

// 接收父组件传递的病历数据
const diseaseHistory = ref('')

// 接收父组件传递的主诉和现病史
const currentRecord = ref('')

// 接收父组件传递的数据
const props = defineProps({
  // 父组件传递的全身状况数据
  systemicDiseaseFromFather: {
    type: Object
  },
  // 父组件传递的病历数据
  diseaseHistoryFromFather: {
    type: Object
  },
  // 父组件传递的主诉和现病史
  currentRecordFromFather: {
    type: Object
  },
  // 父组件传递的影像图片检查图片
  imageCheckFromFather: {
    type: String
  },
  // 父组件传递的口内图片
  mouthImagesFromFather: {
    type: Array
  },
  planFormFromFather: {
    type: Object
  }
})

// 全身状况集合
const systemicDiseaseRecordList = ref({})

// 默认的全身状况记录
const defaultSystemicDiseaseRecord = {
  isShowSymptom: 0,
  patientId: '',
  // 高血压
  highBloodPressure: '0',
  highBloodPressureIndicate: '',
  isHighBloodPressureMedication: '0',
  highBloodPressureMedication: '',
  // 糖尿病
  diabetes: '0',
  diabetesIndicate: '',
  isDiabetesMedication: '0',
  diabetesMedication: '',
  // 冠心病
  coronaryHeartDisease: '0',
  coronaryHeartDiseaseIndicate: '',
  isCoronaryHeartDiseaseMedication: '0',
  coronaryHeartDiseaseMedication: '',
  // 脑血管疾病
  cerebrovascularDisease: '0',
  cerebrovascularDiseaseIndicate: '',
  isCerebrovascularDiseaseMedication: '0',
  cerebrovascularDiseaseMedication: '',
  // 动脉粥样硬化
  atherosclerosis: '0',
  atherosclerosisIndicate: '',
  isAtherosclerosisMedication: '0',
  atherosclerosisMedication: '',
  // 肺部疾病
  lungDisease: '0',
  lungDiseaseIndicate: '',
  isLungDiseaseMedication: '0',
  lungDiseaseMedication: '',
  // 胃肠道病
  gastrointestinalDisease: '0',
  gastrointestinalDiseaseIndicate: '',
  isGastrointestinalDiseaseMedication: '0',
  gastrointestinalDiseaseMedication: '',
  // 类风湿性关节炎
  rheumatoidArthritis: '0',
  rheumatoidArthritisIndicate: '',
  isRheumatoidArthritisMedication: '0',
  rheumatoidArthritisMedication: '',
  // 骨质疏松
  osteoporosis: '0',
  osteoporosisIndicate: '',
  isOsteoporosisMedication: '0',
  osteoporosisMedication: '',
  // 血液病
  hemopathy: '0',
  hemopathyIndicate: '',
  isHemopathyMedication: '0',
  hemopathyMedication: '',
  // 肝胆病
  hepatobiliaryDisease: '0',
  hepatobiliaryDiseaseIndicate: '',
  isHepatobiliaryDiseaseMedication: '0',
  hepatobiliaryDiseaseMedication: '',
  // 其他疾病
  otherDisease: '0',
  otherDiseaseIndicate: '',
  isOtherDiseaseMedication: '0',
  otherDiseaseMedication: '',
  // 心脑血管手术
  cardiacCerebrovascularSurgery: '0',
  cardiacCerebrovascularSurgeryIndicate: '',
  isCardiacCerebrovascularSurgeryMedication: '0',
  cardiacCerebrovascularSurgeryMedication: '',
  // 关节、瓣膜置换手术
  jointValveReplacementSurgery: '0',
  jointValveReplacementSurgeryIndicate: '',
  isJointValveReplacementSurgeryMedication: '0',
  jointValveReplacementSurgeryMedication: '',
  // 器官移植手术
  organTransplantSurgery: '0',
  organTransplantSurgeryIndicate: '',
  isOrganTransplantSurgeryMedication: '0',
  organTransplantSurgeryMedication: '',
  // 其他手术
  otherSurgery: '0',
  otherSurgeryIndicate: '',
  isOtherSurgeryMedication: '0',
  otherSurgeryMedication: '',
  // 妊娠期
  gestationPeriod: '0',
  gestationPeriodIndicate: '',
  isGestationPeriodMedication: '0',
  gestationPeriodMedication: '',
  // 直系亲属牙周炎病史
  immediateFamilyPeriodontitisHistory: '0',
  immediateFamilyPeriodontitisHistoryIndicate: '',
  isImmediateFamilyPeriodontitisHistoryMedication: '0',
  immediateFamilyPeriodontitisHistoryMedication: '',
  // 吸烟
  smoking: '0',
  smokingIndicate: '',
  isSmokingMedication: '0',
  smokingMedication: '',
  // 焦虑、神经紧张、压力
  anxietyNervousnessStress: '0',
  anxietyNervousnessStressIndicate: '',
  isAnxietyNervousnessStressMedication: '0',
  anxietyNervousnessStressMedication: '',
  // 其他疾病、长期药物治疗史
  otherDiseaseAndLongTreatment: '0',
  otherDiseaseAndLongTreatmentIndicate: '',
  isOtherDiseaseAndLongTreatmentMedication: '0',
  otherDiseaseAndLongTreatmentMedication: ''
}

// 绑定影像学图片上传组件
const imageCheckUploadRef = ref(null)

// 影像学图片
const imageCheck = ref(props.imageCheckFromFather)

/**
 * 图片回显和图片赋值
 * @param {*} file
 */
const onUploadImageCheck = (file) => {
  // 读取图片文件
  const reader = new FileReader()
  // 绑定onload事件，读取图片数据并更新imgUrl
  // 注意：这里的imgUrl.value = reader.result是异步的，所以需要在onload事件中更新imgUrl
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    imageCheck.value = reader.result
  }
}

/**
 * 删除图片
 * @param {*} event
 */
const deleteImageCheck = (event) => {
  event.stopPropagation() // 阻止事件冒泡
  imageCheck.value = ''
}

const previewImageCheckVisible = ref(false)
/**
 * // 预览图片
 */
const handlePreview = () => {
  previewImageCheckVisible.value = true
}

/**
 * 监听 imageCheck 的变化, 通知父组件更新图片
 */
watch(
  () => imageCheck.value,
  (newVal) => {
    // console.log('newVal', newVal)
    // 通知父组件更新图片
    emit('updateImageCheck', newVal)
  }
)

// 口内图片, 将其转换为 格式为 [{url: '', id: ''}] 的数组
const mouthImages = ref(
  props.mouthImagesFromFather === null ||
    props.mouthImagesFromFather === undefined
    ? []
    : props.mouthImagesFromFather.map((item) => ({
        url: item,
        id: ''
      }))
)
const previewMouthImageVisible = ref(false)
const currentPreviewImage = ref('')
const mouthImageUploadRef = ref(null)
// 设置图片展示的顺序
const count = ref(0)
/**
 * 图片回显和图片赋值
 * @param {*} file
 */
const onUploadMouthImage = (file) => {
  // console.log(file)
  // console.log(count.value)
  if (file) {
    // 调用这个方法, 让count自增
    count.value += 1
  }
  // 读取图片文件
  const reader = new FileReader()
  // 给reader 设置一个id属性, 因为reader.readAsDataURL是异步的, 所以需要设置一个id来标识图片
  // 注意：这里的mouthImages.value.push({url: reader.result, id: reader.id})是异步的,
  // 所以需要在onload事件中更新mouthImages.value
  reader.id = count.value
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    mouthImages.value.push({
      url: reader.result,
      // 设置当前count作为图片id
      id: reader.id
    })
    // 根据 id 排序
    mouthImages.value.sort((a, b) => a.id - b.id)
  }
  // console.log(mouthImages.value)
}

/**
 * 删除图片
 * @param {*} index
 */
const deleteMouthImage = (index) => {
  mouthImages.value.splice(index, 1)
}

/**
 * 预览图片
 * @param {*} index
 */
const handlePreviewMouthImage = (index) => {
  currentPreviewImage.value = mouthImages.value[index]
  previewMouthImageVisible.value = true
}

/**
 * 监听 mouthImages 的变化
 */
watch(
  () => mouthImages.value.length,
  (newVal) => {
    // console.log(newVal)
    // 如果超过9张图片, 从后面删除到9张为止
    if (newVal > 9) {
      // 计算多出的图片数量
      const diff = newVal - 9
      // 循环删除多出的图片
      for (let i = 0; i < diff; i++) {
        mouthImages.value.pop()
      }
      // 提示超过限制
      ElMessage.warning(
        '上传图片数量超出限制, 只能上传9张图片'
      )
    }
    // 通知父组件更新数据
    emit('updateMouthImage', mouthImages.value)
  },
  {
    // 表示deep监听, 监听子组件的变化
    deep: true
  }
)

/**
 * 打开全身状况图对话框
 */
const handleOpen = () => {
  // 判断systemicDiseaseRecordList是否为空
  if (
    Object.keys(systemicDiseaseRecordList.value).length ===
    0
  ) {
    // 设置为null
    systemicDisease.value = null
  }
  generalConditionChartRef.value.open(systemicDisease.value)
}

/**
 * 处理子组件选择的全身状况
 * @param {*} data
 */
const updateSystemicDiseaseRecord = (data) => {
  // 判断 data 是否为默认的全身状况记录
  if (
    JSON.stringify(data) ===
    JSON.stringify(defaultSystemicDiseaseRecord)
  ) {
    // 将 systemicDisease 设置为null
    systemicDisease.value = null
    // 清空systemicDiseaseRecordList
    systemicDiseaseRecordList.value = {}
    return
  }
  // 将temp中的数据更新到systemicDisease中
  systemicDisease.value = data
  // 判断systemicDisease中的每个病是否为1, 为1则将对应的中文名称添加到systemicDiseaseRecordList中
  for (const key in data) {
    // 排除isShowSymptom属性
    if (key === 'isShowSymptom') {
      continue
    }
    // 如果病为1, 且不包含medication, 则将对应的中文名称添加到systemicDiseaseRecordList中
    if (
      data[key] === '1' &&
      key.indexOf('Medication') === -1
    ) {
      systemicDiseaseRecordList.value[key] =
        systemicDiseaseName[key]
    }
  }
}

/**
 * 删除选中的症状
 * @param {*} item
 */
const handleRemoveSystemicDisease = (item) => {
  // 根据item的中文名称获取对应的key
  const key = Object.keys(systemicDiseaseName).find(
    (k) => systemicDiseaseName[k] === item
  )
  // 删除systemicDiseaseRecordList中的key
  delete systemicDiseaseRecordList.value[key]
  // 将systemicDisease中的key设置为0
  systemicDisease.value[key] = '0'
}

/**
 * 在组件挂载完成后, 将父组件传递的systemicDiseaseFromFather数据更新到systemicDisease中
 */
onMounted(() => {
  systemicDisease.value = props.systemicDiseaseFromFather
  diseaseHistory.value = props.diseaseHistoryFromFather
  currentRecord.value = props.currentRecordFromFather
  planForm.value = props.planFormFromFather
})

/**
 * 监听 systemicDisease 的数据变化, 每次变化通知父组件, 更新父组件的systemicDiseaseFromFather数据
 */
watch(
  () => systemicDisease.value,
  (newVal) => {
    // console.log('newVal', newVal)
    systemicDisease.value = newVal
    // 更新systemicDiseaseRecordList
    systemicDiseaseRecordList.value = {}
    for (const key in newVal) {
      // 排除isShowSymptom属性
      if (key === 'isShowSymptom') {
        continue
      }
      // 如果病为1, 且不包含medication, 则将对应的中文名称添加到systemicDiseaseRecordList中
      if (
        newVal[key] === '1' &&
        key.indexOf('Medication') === -1
      ) {
        systemicDiseaseRecordList.value[key] =
          systemicDiseaseName[key]
      }
    }
    // 通知父组件更新数据
    emit('updateSystemicDiseaseFromFather', newVal)
  }
)

/**
 * 监听 diseaseHistory 的数据变化, 每次变化通知父组件, 更新父组件的diseaseHistoryFromFather数据
 */
watch(
  () => diseaseHistory.value,
  (newVal) => {
    // console.log('newVal', newVal)
    diseaseHistory.value = newVal
    // 通知父组件更新数据
    emit('updateDiseaseHistoryFromFather', newVal)
  },
  {
    // 表示deep监听, 监听子组件的变化
    deep: true
  }
)

/**
 * 监听 currentRecord 的数据变化, 每次变化通知父组件, 更新父组件的currentRecordFromFather数据
 */
watch(
  () => currentRecord.value,
  (newVal) => {
    // console.log('newVal', newVal)
    currentRecord.value = newVal

    // 通知父组件更新数据
    emit('updateCurrentRecordFromFather', newVal)
  },
  {
    // 表示deep监听, 监听子组件的变化
    deep: true
  }
)

/**
 * 监听父组件传递的systemicDiseaseFromFather数据变化, 每次变化更新子组件的systemicDisease数据
 */
watch(
  () => props.systemicDiseaseFromFather,
  (newValue) => {
    if (
      JSON.stringify(newValue) ===
      JSON.stringify(defaultSystemicDiseaseRecord)
    ) {
      // 将 systemicDisease 设置为null
      systemicDisease.value = null
      // 清空systemicDiseaseRecordList
      systemicDiseaseRecordList.value = {}
      // console.log('清空全身状况')

      return
    }
    systemicDisease.value = newValue
  }
)

/**
 * 监听父组件传递的diseaseHistoryFromFather数据变化, 每次变化更新子组件的diseaseHistory数据
 */
watch(
  () => props.diseaseHistoryFromFather,
  (newValue) => {
    diseaseHistory.value = newValue
    // console.log(diseaseHistory.value)
  }
)

/**
 * 监听父组件传递的currentRecordFromFather数据变化, 每次变化更新子组件的currentRecord数据
 */
watch(
  () => props.currentRecordFromFather,
  (newValue) => {
    currentRecord.value = newValue
    // console.log(currentRecord.value)
  }
)

/**
 * 监听父组件传递的planFormFromFather数据变化, 每次变化通知父组件, 更新父组件的planForm数据
 */
watch(
  () => props.planFormFromFather,
  (newVal) => {
    planForm.value = newVal
    // 通知父组件更新数据
    emit('updatePlanFormFromFather', newVal)
  },
  {
    // 表示deep监听, 监听子组件的变化
    deep: true
  }
)
</script>

<template>
  <el-scrollbar height="550px">
    <div class="main-content">
      <GeneralConditionChart
        ref="generalConditionChartRef"
        @updateSystemicDiseaseRecord="
          updateSystemicDiseaseRecord
        "
      ></GeneralConditionChart>

      <!-- 病历信息 -->
      <el-row>
        <el-col :span="14">
          <el-card class="disease-info-card">
            <template #header> 基本信息 </template>
            <el-form label-width="80px">
              <el-form-item label="主诉">
                <el-input
                  type="textarea"
                  placeholder="请输入主诉"
                  maxlength="30"
                  show-word-limit
                  v-model="currentRecord.mainComplaint"
                />
              </el-form-item>
              <el-form-item label="现病史">
                <el-input
                  type="textarea"
                  maxlength="200"
                  show-word-limit
                  placeholder="请输入现病史"
                  v-model="currentRecord.currentHistory"
                />
              </el-form-item>
              <el-form-item label="既往病史">
                <el-input
                  type="textarea"
                  maxlength="200"
                  show-word-limit
                  placeholder="请输入既往病史"
                  v-model="diseaseHistory.pastHistory"
                />
              </el-form-item>
              <el-form-item label="个人病史">
                <el-input
                  type="textarea"
                  maxlength="150"
                  show-word-limit
                  placeholder="请输入个人病史"
                  v-model="diseaseHistory.personalHistory"
                />
              </el-form-item>
              <el-form-item label="家族病史">
                <el-input
                  type="textarea"
                  placeholder="请输入家族病史"
                  maxlength="150"
                  show-word-limit
                  v-model="diseaseHistory.familyHistory"
                />
              </el-form-item>
              <el-form-item label="全身状况">
                <!-- 使用el-tag标签展示全身状况, 遍历systemicDiseaseRecordList中的每个病,展示对应的中文名称 -->
                <el-tag
                  type="danger"
                  v-for="(
                    item, index
                  ) in systemicDiseaseRecordList"
                  :key="index"
                  closable
                  @close="handleRemoveSystemicDisease(item)"
                >
                  {{ item }}
                </el-tag>

                <el-button
                  class="add-tag-btn"
                  @click="handleOpen()"
                  type="primary"
                  size="small"
                  plain
                  ><el-icon>
                    <Plus />
                  </el-icon>
                </el-button>
              </el-form-item>
            </el-form>
          </el-card>

          <br />

          <!-- 口内照片 -->
          <el-card class="mouth-image-card">
            <template #header> 口内照片 </template>
            <div class="image-grid">
              <div
                v-for="(image, index) in mouthImages"
                :key="index"
                class="image-container"
              >
                <el-image
                  class="avatar"
                  :src="image.url"
                  fit="cover"
                />
                <div class="image-overlay" @click.stop>
                  <el-button
                    type="primary"
                    circle
                    plain
                    @click="handlePreviewMouthImage(index)"
                  >
                    <el-icon>
                      <View />
                    </el-icon>
                  </el-button>
                  <el-button
                    type="danger"
                    circle
                    plain
                    @click="deleteMouthImage(index)"
                  >
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </div>
              </div>
              <el-upload
                v-if="mouthImages.length < 9"
                ref="mouthImageUploadRef"
                class="avatar-uploader"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="onUploadMouthImage"
                multiple
              >
                <el-icon class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </div>
          </el-card>
          <!-- 预览口内图片的对话框 -->
          <el-dialog
            class="image-check-preview-dialog"
            top="5vh"
            v-model="previewMouthImageVisible"
            title="图片预览"
            width="700px"
          >
            <el-image
              :src="currentPreviewImage.url"
              fit="contain"
              class="full-image"
            />
          </el-dialog>
          <br />

          <!-- 影像学检查 -->
          <el-card class="image-check-card">
            <template #header> 影像学检查 </template>
            <el-upload
              ref="imageCheckUploadRef"
              class="avatar-uploader"
              :auto-upload="false"
              :show-file-list="false"
              :on-change="onUploadImageCheck"
            >
              <div
                v-if="imageCheck"
                class="image-container"
              >
                <el-image
                  class="avatar"
                  :src="imageCheck"
                  fit="cover"
                  :preview-src-list="[imageCheck]"
                  :initial-index="0"
                  hide-on-click-modal
                />
                <div class="image-overlay" @click.stop>
                  <el-button
                    type="primary"
                    circle
                    plain
                    @click="handlePreview"
                  >
                    <el-icon>
                      <View />
                    </el-icon>
                  </el-button>
                  <el-button
                    type="danger"
                    circle
                    plain
                    @click="deleteImageCheck"
                  >
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </el-button>
                </div>
              </div>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
          </el-card>
          <!-- 预览检查图片的对话框 -->
          <el-dialog
            class="image-check-preview-dialog"
            top="5vh"
            v-model="previewImageCheckVisible"
            title="图片预览"
            width="700px"
          >
            <el-image
              :src="imageCheck"
              fit="contain"
              class="full-image"
            />
          </el-dialog>
        </el-col>

        <!-- 计划 -->
        <el-col :span="8" class="plan-container">
          <el-card>
            <template #header> 治疗计划 </template>
            <div class="plan-form">
              <el-form
                :model="planForm"
                label-width="auto"
                style="max-width: 500px"
              >
                <el-form-item label="治疗类型">
                  <el-select
                    v-model="planForm.planType"
                    placeholder="请选择患者类型"
                    style="width: 240px"
                  >
                    <el-option
                      :key="0"
                      label="拔牙"
                      :value="0"
                    />
                    <el-option
                      :key="1"
                      label="补牙"
                      :value="1"
                    />
                    <el-option
                      :key="2"
                      label="牙龈出血"
                      :value="2"
                    />
                    <el-option
                      :key="3"
                      label="短期牙周病"
                      :value="3"
                    />
                    <el-option
                      :key="4"
                      label="长期牙周病"
                      :value="4"
                    />
                    <el-option
                      :key="5"
                      label="牙周病康复"
                      :value="5"
                    />
                  </el-select>
                </el-form-item>
                <el-form-item label="主治医生">
                  <el-input
                    style="width: 240px"
                    placeholder="请输入主治医生"
                    v-model="planForm.mainDoctor"
                  />
                </el-form-item>
                <el-form-item label="治疗计划">
                  <el-input
                    v-model="planForm.planDec"
                    :rows="2"
                    :autosize="{ minRows: 8, maxRows: 10 }"
                    type="textarea"
                    placeholder="请输入治疗计划"
                  />
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>
</template>

<style scoped lang="scss">
// 计划容器
.plan-container {
  height: 100%;
  width: 100%;
  // 设置左边距
  margin-left: 10px;
  // 设置高度
  height: 50vh;

  .el-card {
    width: 110%;
    height: 100%;
  }
}

// 病历信息卡片
.disease-info-card {
  .descriptions {
    .tag-item {
      // 设置字体大小
      font-size: 16px;
    }

    :deep(.el-descriptions__body) {
      width: 100%;
    }

    :deep(.el-descriptions__label) {
      width: 15%;
    }

    :deep(.el-descriptions__content) {
      width: 30px;
      // 设置字体大小
      font-size: 16px !important;
      // 设置自动换行
      word-break: break-all;
    }
  }

  .el-tag {
    // 设置大小
    height: 30px;
    // 设置字体大小
    font-size: 14px;
    // 设置右边距
    margin-right: 10px;
    // 设置下边距
    margin-bottom: 10px;
  }

  .add-tag-btn {
    // 和el-tag一样设置大小
    height: 30px;
    // 设置字体大小
    font-size: 14px;
    // 设置右边距
    margin-right: 10px;
    // 设置向上偏移
    margin-bottom: 10px;
  }
}

// 影像学检查图片卡片
.image-check-card {
  .avatar-uploader {
    display: inline-block;
    text-align: center;

    :deep() {
      .avatar {
        width: 178px;
        height: 178px;
        display: block;
      }

      .el-upload {
        border: 2px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
      }

      .el-upload:hover {
        border-color: var(--el-color-primary);
      }

      .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
      }
    }
  }

  .image-container {
    position: relative;
    display: inline-block;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .image-container:hover .image-overlay {
    opacity: 1;
  }
}

// 影像学检查图片预览对话框
.image-check-preview-dialog {
  .full-image {
    width: 100%;
    height: 80%;
  }
}

// 口内照片卡片
.mouth-image-card {
  .image-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    /* 调整图片之间的间距 */
  }

  .image-container {
    position: relative;
    display: inline-block;
    margin-right: 10px;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    border: 2px solid var(--el-border-color);
    /* 为已上传的图片添加边框 */
  }

  .avatar-uploader {
    border: 2px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
    width: 178px;
    height: 178px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .avatar-uploader:hover {
    border-color: var(--el-color-primary);
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }

  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
  }

  .image-container:hover .image-overlay {
    opacity: 1;
  }

  .full-image {
    width: 100%;
    height: 80%;
  }
}

// 口内照片预览对话框
.mouth-image-preview-dialog {
  .full-image {
    width: 100%;
    height: 80%;
  }
}
</style>
